<!-- @format -->

<script setup lang="ts">
const props = defineProps({
  stylData: {
    type: Object,
    required: true,
  },
})

const emit = defineEmits(['change'])

const onChange = () => {
  emit('change', props.stylData)
}

const onContentChange = (e: any) => {
  props.stylData.content = e.detail.value
  onChange()
}
</script>

<template>
  <div class="answer-x">
    <div class="label">内容标题：</div>
    <wd-input
      type="text"
      v-model="stylData.title"
      @input="onChange"
      placeholder="请输入内容标题"
    />
    <div class="label">内容：</div>

    <textarea
      class="input-x"
      placeholder-class="input-placeholder"
      :value="stylData.content"
      placeholder="请输入分享后打开的内容"
      @input="onContentChange"
    />
  </div>
</template>
<style scoped>
.answer-x {
  padding: 20rpx;
}
.ph-20 {
  padding: 0 20rpx;
}
.label {
  font-size: 28rpx;
  color: #999;
  margin: 20rpx 0;
}
.input-x {
  background: #f5f5f5;
  width: 100%;
  padding: 20rpx;
  max-height: 14vh;
  box-sizing: border-box;
}
.input-placeholder {
  font-size: 24rpx;
}
</style>
